<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制矩形</title>
    <style>
        canvas {
            display: block;
            margin: 10px auto 0;
            border: 1px solid orange;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="600" height="500">您的浏览器不支持canvans</canvas>
</body>
<script>
    const canvans = document.getElementById('canvas')
    const ctx = canvans.getContext('2d')

    const getPixelRatio = context => {
        return window.devicePixelRatio || 1
    }

    /**
     *  01. 放大canvas
     *  02. 在css中将宽高设置为原来的大小
     *  03. 考虑到内容的缩放，因此也需要将ctx 缩放
     * */
    const ratio = getPixelRatio()
    const oldWith = canvans.width
    const oldHeight = canvans.height
    // 放大canvas
    canvans.width = canvans.width * ratio
    canvans.height = canvans.height * ratio
    // css中设置为原来的大小
    canvans.style.width = oldWith + 'px'
    canvans.style.height = oldHeight + 'px'
    // 缩放ctx
    ctx.scale(ratio, ratio)

    // 提前设置相关属性
    const ht = canvans.clientHeight
    const wd = canvans.clientWidth
    const pad = 20
    const bottomPad = 20
    const step = 100

    // 封装一个方法
    const drawAxis = options => {
        const { ht, wd, pad, bottomPad, step, ctx } = options
        // 绘制坐标轴
        ctx.beginPath()
        ctx.lineWith = 2
        ctx.strokeStyle = 'lightblue'
        ctx.moveTo(pad, pad)
        ctx.lineTo(pad, ht * ratio - bottomPad)
        ctx.lineTo(wd * ratio - pad, ht * ratio - bottomPad)
        ctx.stroke()
        ctx.closePath()

        // 绘制X轴的刻度
        ctx.beginPath()
        ctx.lineWidth = 1
        ctx.strokeStyle = '#666'
        for (let i = 1; i < Math.floor(wd * ratio / step); i++) {
            ctx.moveTo(pad + i * step, ht * ratio - bottomPad)
            ctx.lineTo(pad + i * step, ht * ratio - bottomPad - 10)
        }
        ctx.stroke()
        ctx.closePath()

        // 绘制y轴的刻度
        ctx.beginPath()
        ctx.lineWidth = 1
        ctx.strokeStyle = '#666'
        for (let i = 1; i < Math.floor(ht * ratio / step); i++) {
            ctx.moveTo(pad, (ht * ratio - bottomPad) - (i * step))
            ctx.lineTo(pad + 10, (ht * ratio - bottomPad) - (i * step))
        }
        ctx.stroke()
        ctx.closePath()
    }

    drawAxis({
        ht,
        wd,
        pad,
        bottomPad,
        ctx,
        step
    })

    // 绘制圆环
    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.strokeStyle = 'orange'
    ctx.arc(200, 200, 100, 0, Math.PI / 4)
    ctx.stroke()
    ctx.closePath()
    // 绘制圆形
    ctx.beginPath()
    ctx.fillStyle = 'skyblue'
    ctx.moveTo(200, 200)
    ctx.arc(200, 200, 50, 0, -Math.PI / 2)
    ctx.fill()
    ctx.closePath()

    ctx.beginPath()
    ctx.fillStyle = 'skyblue'
    moveTo(300,300)
    ctx.arc(300, 300, 50, 0, -Math.PI / 2, true)
    ctx.fill()
    ctx.closePath()
</script>

</html>